<!doctype html>
<html>
<head>

  <title>core-item</title>

  <script src="../platform/platform.js"></script>

  <link rel="import" href="../core-icons/core-icons.html">
  <link rel="import" href="core-item.html">

  <style>
  
    body {
      font-family: sans-serif;
      font-size: 16px;
      margin: 20px;
    }
    
    core-item {
      width: 300px;
    }

    core-item.big {
      font-size: 24px;
    }

    core-item.small {
      font-size: 12px;
    }
    
    core-item.contact-item {
      height: 50px;
      background-color: #efefef;
      border: 1px solid #ddd;
    }

    core-item.contact-item .name {
      font-size: 1.125em;
    }

    core-item.contact-item .address {
      font-size: 0.75em;
    }
    
  </style>

</head>
<body unresolved>

    <h2>items with icon and label:</h2>

    <core-item icon="settings" label="Settings"></core-item>
    <core-item icon="account-box" label="Account"></core-item>
    
    <h2>items with label only:</h2>

    <core-item label="Settings"></core-item>
    <core-item label="Account"></core-item>
    
    <h2>links (via &lt;a&gt;):</h2>
    
    <core-item icon="settings" label="Settings"><a href="#settings" target="_self"></a></core-item>
    <core-item icon="account-box" label="Account"><a href="#account" target="_self"></a></core-item>

    <h2>items sized with CSS:</h2>
    <core-item icon="settings" label="Settings" class="font-scalable big"></core-item>
    <core-item icon="account-box" label="Account" class="font-scalable big"></core-item>
    <core-item icon="settings" label="Settings" class="font-scalable small"></core-item>
    <core-item icon="account-box" label="Account" class="font-scalable small"></core-item>
    
    <h2>custom item:</h2>
    
    <core-item icon="account-circle" class="contact-item">
      <div flex>
        <div class="name">John Doe</div>
        <div class="address">123 A Street, San Francisco, CA</div>
      </div>
      <core-icon icon="more-vert"></core-icon>
    </core-item>

</body>
</html>
